<template>
  <div class="mainContainer" style="height: 5000px">
    <!-- 搜索栏 -->
    <van-sticky>
      <searchBar type="3" title="网易严选" style="background-color: #fff" />
    </van-sticky>
    <!-- 轮播图 -->
    <van-swipe :autoplay="5000" :show-indicators="false">
      <van-swipe-item
        v-for="(image, index) in skuInfo.skuImageList"
        :key="image.id"
        class="swiperItem"
      >
        <img v-lazy="image.imgUrl" />
      </van-swipe-item>
    </van-swipe>
    <!-- 价格 -->
    <div class="priceContainer">
      <p>首单全额返 最高可100%返还</p>
      <div class="priceAll">
        <span class="price"><i>￥</i>{{ skuInfo.price }}</span>
        <span class="return"><i>立返￥</i>150元</span>
      </div>
    </div>
    <!-- 标题位置 -->
    <div class="titleContainer">
      <div class="title">{{ skuInfo.skuName }}</div>
      <div class="feedback">
        <!-- 自营大盒子 -->
        <div class="self">
          <!-- 自营-网易严选 -->
          <div class="top">
            <span class="own">自营</span>
            <span class="wyyx"> <van-icon name="gift-o" />网易严选 </span>
          </div>
          <div class="recommendReason">推荐理由</div>
        </div>
        <!-- 99.1% -->
        <div class="backfeedNumber">
          <div>
            <p>99.1%</p>
            <span>好评率</span>
          </div>
        </div>
      </div>
      <div class="arrow">
        <van-icon name="arrow" />
      </div>
    </div>
    <!-- 推荐原因 -->
    <div class="reasonContainer">
      <p><i>①</i>四档调节功能地盘，防爆更安全</p>
      <p><i>①</i>四档调节功能地盘，防爆更安全</p>
      <p><i>①</i>四档调节功能地盘，防爆更安全</p>
      <p><i>①</i>四档调节功能地盘，防爆更安全</p>
    </div>
    <!-- 规则盒子 -->
    <div class="ruleContainer">
      <span>规则:</span>
      <span class="first"
        ><p></p>
        首单全额返最高返150余额，点击查看</span
      >
      <span>
        <van-icon name="arrow" />
      </span>
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- 包邮 -->
    <div class="postContainer lineAndArrow">
      <div>邮费： 满99包邮</div>
      <span><van-icon name="arrow" /></span>
    </div>
    <!-- 购物返 -->
    <div class="buyreturn lineAndArrow">
      <div>购物返： 最高返<em>169积分</em></div>
      <span><van-icon name="arrow" /></span>
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- 请选择规格数量-->
    <div class="lineAndArrow">
      <div>请选择规格数量</div>
      <span><van-icon name="arrow" /></span>
    </div>
    <!-- 限制：该商品不可使用优惠券 -->
    <div class="lineAndArrow">
      <div>限制：该商品不可使用优惠券</div>
    </div>
    <!-- 配送 -->
    <div class="sendContainer lineAndArrow">
      <div>限制： <em>请选择配送地址</em></div>
    </div>
    <!-- 备注 -->
    <div class="lineAndArrow">
      <div>备注： 大家具送货安装及售后服务细则>></div>
      <span><van-icon name="arrow" /></span>
    </div>
    <!-- 轮播图 -->
    <van-swipe
      :autoplay="5000"
      height="80px"
      indicator-color="#de212a"
      class="smallSwiper"
    >
      <van-swipe-item
        v-for="(image, index) in images"
        :key="index"
        style="height: 80px"
      >
        <img class="swiperImgs" v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <!-- line -->
    <div class="line"></div>
    <!-- 请选择规格数量-->
    <div class="lineAndArrow userFeedback">
      <div>用户评价(8127)</div>
      <span><em>99.1%</em>好评率 <van-icon name="arrow" /></span>
    </div>
    <!-- 用户评价头像 -->
    <div class="commentContainer">
      <div class="avatar">
        <img src="../../assets/images/user.webp" alt="" />
        <div class="name">云****端</div>
        <van-icon class="icon" name="send-gift" />
      </div>
      <div class="time">
        <span>2022-7-2 16:38:07 </span> <span>灰色+白色全功能调节</span>
      </div>
      <div class="content">终于下定决心买回来了，值。。。。</div>
      <div class="commentImg">
        <img src="../../assets/images/tx.jpg" alt="" />
        <img src="../../assets/images/tx.jpg" alt="" />
      </div>
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- logo -->
    <div class="logoContainer">
      <div class="logo">
        <img src="../../assets/images/logo.png" alt="" />
      </div>
      <div class="name">
        <div class="wyyx">
          <p>网易严选</p>
          <em><van-icon name="arrow" /></em>
        </div>
        <div class="hope">
          以“让美好生活触手可及”为初心，网易严选逐步发展成为中国新中产喜爱的生活方式品牌。
        </div>
      </div>
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- //商品参数 -->
    <div class="paramsContainer">
      <div class="title">商品参数</div>
      <div class="paramsItem">
        <span class="left">面料</span>
        <span class="right">网布</span>
      </div>
      <div class="paramsItem">
        <span class="left">面料</span>
        <span class="right">网布</span>
      </div>
      <div class="paramsItem">
        <span class="left">面料</span>
        <span class="right">网布</span>
      </div>
      <div class="paramsItem">
        <span class="left">面料</span>
        <span class="right">网布</span>
      </div>
      <div class="paramsItem">
        <span class="left">面料</span>
        <span class="right">网布</span>
      </div>
      <div class="paramsItem">
        <span class="left">面料</span>
        <span class="right"
          >1.周六日暂无法发货，周末订单延至周一发货，请知悉！<br />2
          请您在提货、签收货物前仔细检查外包装是否完好，如发现件数不对或者商品严重损坏请不予签收，并当场及时联系严选客服，物流公司返回后我们会重新发货或补发配件。<br />3
          若您当场的确不方便验货，请您在收到货物24个小时内验货，若发现少件、损坏、严重质量问题，请立即致严选客服热线，并拍照留存，我们会尽快为您处理。有退换货可能的，请一定保留原包装。</span
        >
      </div>
    </div>
    <!-- line -->
    <div class="line"></div>
    <!-- 图片列表 -->
    <div class="imgListContainer">
      <img
        v-for="img in skuInfo.skuImageList"
        :key="img.id"
        :src="img.imgUrl"
        alt=""
      />
    </div>
    <!-- 常见问题 -->
    <div class="normalContainer">
      <div class="title">—— 常见问题 ——</div>
      <div class="item">
        <div class="qusetion"><i></i> 网易严选的订单如何配送？</div>
        <div class="content">
          网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。
        </div>
      </div>
      <div class="item">
        <div class="qusetion"><i></i> 网易严选的订单如何配送？</div>
        <div class="content">
          网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。
        </div>
      </div>
      <div class="item">
        <div class="qusetion"><i></i> 网易严选的订单如何配送？</div>
        <div class="content">
          网易严选会根据商品所在地、顾客所在地和商品的尺寸重量优选物流配送商，确保优质用户体验。目前暂不支持自选快递，具体物流信息可在下单成功后“我的订单-追踪物流”中查看。
        </div>
      </div>
    </div>
    <!-- 可能还喜欢 -->
    <div class="maybeLike">
      <div class="title">—— 你可能还喜欢 ——</div>
      <List/>
    </div>
    <!-- 底部加入购物车 -->
    <div class="tabBarContainer">
      <div class="kefu">
        <svg
          t="1656810700102"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2293"
          data-darkreader-inline-fill=""
          width="28"
          height="28"
        >
          <path
            d="M448 917.376C448 917.333333 576 917.333333 576 917.333333c0.085333 0 0-42.709333 0-42.709333C576 874.666667 448 874.666667 448 874.666667c-0.085333 0 0 42.709333 0 42.709333z m371.349333-173.034667C809.6 745.877333 799.573333 746.666667 789.333333 746.666667a21.333333 21.333333 0 0 1-21.333333-21.333334V384a21.333333 21.333333 0 0 1 21.333333-21.333333 191.146667 191.146667 0 0 1 92.373334 23.637333C828.202667 234.517333 681.045333 128 511.296 128 341.290667 128 193.749333 234.816 140.458667 387.328A191.125333 191.125333 0 0 1 234.666667 362.666667a21.333333 21.333333 0 0 1 21.333333 21.333333v341.333333a21.333333 21.333333 0 0 1-21.333333 21.333334 192 192 0 0 1-148.906667-313.216 21.269333 21.269333 0 0 1 0.042667-8.682667C127.36 228.288 304.469333 85.333333 511.274667 85.333333c209.706667 0 388.544 146.944 427.008 347.093334l0.213333 1.344A191.210667 191.210667 0 0 1 981.333333 554.666667c0 70.4-37.909333 131.968-94.421333 165.397333-57.642667 100.693333-154.752 174.762667-268.778667 204.074667A42.517333 42.517333 0 0 1 576 960h-128c-23.573333 0-42.666667-19.157333-42.666667-42.624v-42.752c0-23.552 18.922667-42.624 42.666667-42.624h128c23.573333 0 42.666667 19.157333 42.666667 42.624v5.141333a392.810667 392.810667 0 0 0 200.682666-135.424zM85.333333 554.666667c0.298667 133.589333 128 148.949333 128 148.949333V406.144s-128.298667 14.933333-128 148.522667z m853.333334 0c0.298667-133.589333-128-148.522667-128-148.522667v297.472s127.701333-15.36 128-148.949333z"
            fill="#707070"
            p-id="2294"
            data-darkreader-inline-fill=""
            style="--darkreader-inline-fill: #716e65"
          ></path>
        </svg>
      </div>
      <div class="buynow">立即购买</div>
      <div class="addCart" @click="addCart">加入购物车</div>
     <van-sku
          v-model="show"
          :sku="sku"
         
          :goods="goods"
          :hide-stock="sku.hide_stock"
          :message-config="messageConfig"
          :properties="properties"
          :goods-id="goodsId"
          @add-cart="addCartReal"
        />
    </div>

    <!-- backTop -->
    <backTop />
   

    <!-- <img
      class="xxxx"
      src="../../assets/images/tx.jpg"
      style="margin-top: 1000px"
      alt=""
    /> -->
  </div>
</template>

<script>
import searchBar from "@/components/searchBar";
import backTop from "@/components/backTop";
import List from '@/pages/Search/List.vue'
export default {
  name: "Detail",
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      skuInfo: {}, //商品详情数据
      spuSaleAttrList:[],  //属性列表spu
      goodsId:'',   //当前商品的id
      // sku相关
      show: false,
      // 商品SKU数据
      sku: {
        // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
        // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
        tree: [
          {
            k: "颜色", // skuKeyName：规格类目名称
            k_s: "s1", // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [
              {
                id: "1", // skuValueId：规格值 id
                name: "冰雾白", // skuValueName：规格值名称
                imgUrl: "https://img01.yzcdn.cn/2.jpg", // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: "https://img01.yzcdn.cn/2.jpg", // 用于预览显示的规格类目图片
                price:'5999',
              },
              
              
               
            ],
            largeImageMode: true, //  是否展示大图模式
          },
          
        ],
        // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
        list: [
          {
            id: 1, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
            {
            id: 1, // skuId
            s1: "1", // 规格类目 k_s 为 s1 的对应规格值 id
            s2: "1", // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110, // 当前 sku 组合对应的库存
          },
           
        ],
        price: "99999.00", // 默认价格（单位元）
        stock_num: 227, // 商品总库存
        collection_id: '', // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
        none_sku: false, // 是否无规格商品
        messages: [
          {
            // 商品留言
            datetime: "0", // 留言类型为 time 时，是否含日期。'1' 表示包含
            multiple: "0", // 留言类型为 text 时，是否多行文本。'1' 表示多行
            name: "留言", // 留言名称
            type: "text", // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
            required: "1", // 是否必填 '1' 表示必填
            placeholder: "", // 可选值，占位文本
            extraDesc: "", // 可选值，附加描述文案
          },
        ],
        hide_stock: false, // 是否隐藏剩余库存
      },
      // 商品信息
      goods: {
        // 默认商品 sku 缩略图
        picture: "https://img01.yzcdn.cn/1.jpg",
      },


      messageConfig: {
        // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
        uploadImg: () => {
          return new Promise((resolve) => {
            setTimeout(
              () =>
                resolve(
                  "https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg"
                ),
              1000
            );
          });
        },
        // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
        customUpload: () => {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve("https://img01.yzcdn.cn/vant/leaf.jpg");
            }, 1000);
          });
        },
        // 最大上传体积 (MB)
        uploadMaxSize: 3,
        // placeholder 配置
        placeholderMap: {
          text: "xxx",
          tel: "xxx",
        },
        // 初始留言信息
        // 键：留言 name
        // 值：留言内容
        initialMessages: {
          留言: "留言信息",
        },
      },
      properties:[
        // 商品属性
        {
          k_id: 1, // 属性id
          k: '版本', // 属性名
          is_multiple: false, // 是否可多选
          v: [
          
          ],
        },
        
      ],
   

        };
  },
  components: {
    searchBar,
    backTop,
    List
  },

  methods: {
    // 页面加载发请求  获取sku信息
    async getDetailInfo() {
      const { skuid } = this.$route.query;
      const result = await this.$ajax.detail.reqGetDetailInfo(skuid);
      console.log(result)
      const {skuInfo} = result.data
      if (result.code == 200) {
        console.log(result)
        this.skuInfo = skuInfo;
        this.goods.picture = skuInfo.skuDefaultImg
        this.sku.price = skuInfo.price
        this.spuSaleAttrList = result.data.spuSaleAttrList
        this.goodsId = skuInfo.id
       
        // 选择不同属性
        this.spuSaleAttrList[0].spuSaleAttrValueList.forEach((item)=>{
          const obj =  {
              id: item.id, // 属性值id
              name: item.saleAttrValueName, // 属性值名
              price: 5999, // 属性值加价
            }
        this.properties[0].v.push(obj)

        })

      }
    },
     // 点击触发加载购物车组件
    addCart(){
      this.show = true
    },
    // 选完商品数量和属性之后添加到购物车
  async  addCartReal(skuData){
      console.log(skuData)
      const {goodsId,selectedNum} = skuData
      // 发请求添加购物车，如果添加购物车成功的话  跳转到购物车详情页面
    const result =  await  this.$ajax.detail.reqAddCart(goodsId,selectedNum)
    if(result.code == 200){
      // 提示用户添加购物车成功
      this.$toast.success('加入购物车成功')
      // 跳转到购物车页面
      this.$router.push('/cart')
    }
    }
  },
  mounted() {
    // 页面加载发请求
    this.getDetailInfo();
   
  },
}

</script>

<style lang="less" scoped>
.xxxx {
  display: block;
  width: 375px;
}

.mainContainer {
  position: relative;
}

// 99包邮类型小条子
.lineAndArrow {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 15px 20px 15px 0px;
  border-bottom: 1px solid #eee;
  margin-left: 20px;
}

// 10像素线
.line {
  width: 100%;
  height: 10px;

  background-color: #f4f4f4;
}

.swiperItem {
  width: 100%;
  img {
    width: 100%;
  }
}

// 红色价格位置
.priceContainer {
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  background-color: #fb2639;
  color: #fff;
  padding: 10px 20px;
  p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .priceAll {
    display: flex;
    align-items: center;
    .price {
      font-size: 30px;
      font-weight: 700;
      // line-height: 50px;
      i {
        font-size: 14px;
      }
    }
    .return {
      display: inline-block;

      background-color: #fff;
      color: #fb2639;
      border-radius: 8px;
      padding: 6px 2px;
      font-size: 14px;
      font-weight: bold;
      margin-left: 10px;
      line-height: 12px;
      i {
        font-size: 12px;
      }
    }
  }
}

// titleContainer 标题部分
.titleContainer {
  background-color: #fff;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 30px 20px 10px;
  // background-color: #f89;

  .arrow {
    position: absolute;
    top: 75px;
    right: 6px;
    font-size: 14px;
    color: #666;
  }

  .title {
    font-size: 18px;
    font-weight: bold;
    white-space: pre-wrap;
    margin-bottom: 15px;
  }

  .feedback {
    display: flex;
    justify-content: space-between;

    .top {
      display: flex;
      font-size: 14px;
      margin-bottom: 10px;

      .own {
        display: inline-block;
        padding: 2px 3px;
        border-radius: 5px;
        background-color: #fb2639;
        color: #fff;
        font-size: 12px;
        margin-right: 5px;
      }

      .wyyx {
        font-size: 14px;
        color: #666;
      }
    }

    .recommendReason {
      font-size: 14px;
      color: #666;
    }

    .backfeedNumber {
      display: flex;
      font-size: 16px;
      div {
        p {
          font-weight: bold;
          color: #fb2639;
        }
        span {
          font-size: 14px;
          color: #666;
        }
      }
    }
  }
}

// 推荐原因
.reasonContainer {
  // background-color: #fff;
  box-sizing: border-box;
  width: 100%;
  background-color: #fafafa;
  padding: 10px;
  font-size: 14px;
  p {
    margin-bottom: 5px;

    i {
      color: #fb2639;
      font-weight: bold;
      margin-right: 3px;
    }
  }
}

//规则
.ruleContainer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  font-size: 16px;
  padding: 20px;
  justify-content: space-between;
  font-size: 14px;
  .first {
    margin-left: 6px;
    flex: 1;
    font-size: 14px;
    color: #666;
    padding-left: 6px;
    display: flex;
    position: relative;
    p {
      width: 4px;
      height: 4px;
      border-radius: 2px;
      background-color: #fb2639;
      position: absolute;
      top: 5px;
      left: 0;
    }
  }
}
// 购物返
.buyreturn {
  border: none;
  em {
    color: #fb2639;
  }
}
// 配送
.sendContainer {
  em {
    color: #666;
  }
}
// 小轮播图
.swiperImgs {
  height: 100%;
  width: 100%;
}
.smallSwiper {
  /deep/.van-swipe__indicators {
    left: 90%;
  }
}

.userFeedback {
  em {
    color: #fb2639;
  }
}
// 用户评论
.commentContainer {
  box-sizing: border-box;
  width: 100%;
  padding: 20px;
  // background-color: pink;
  .avatar {
    display: flex;
    align-items: center;
    font-size: 14px;
    img {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 10px;
    }
    .icon {
      margin-left: 5px;
      color: #b49d6f;
      font-size: 16px;
    }
  }
  .time {
    color: #666;
    font-size: 14px;
    margin-top: 8px;
  }
  .content {
    font-size: 14px;
    margin-top: 10px;
  }
  .commentImg {
    img {
      width: 60px;
      height: 60px;
      border-radius: 10px;
      margin-top: 10px;
      margin-right: 10px;
    }
  }
}
//logo 和名字
.logoContainer {
  display: flex;
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  font-size: 12px;
  .logo {
    margin-right: 20px;
    img {
      width: 50px;
      height: 50px;
    }
  }
  .name {
    display: flex;
    flex-direction: column;
    .wyyx {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      p {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
// 商品参数
.paramsContainer {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  font-size: 12px;
  .title {
    font-size: 15px;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
  }
  .paramsItem {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px dashed #ccc;
    .left {
      width: 100px;
      color: #bbb;
    }
    .right {
      flex: 1;
    }
  }
}
//图片列表
.imgListContainer {
  box-sizing: border-box;
  width: 100%;
  img {
    width: 100%;
    height: 600px;
  }
}

// 常见问题
.normalContainer {
  box-sizing: border-box;
  padding: 20px;
  .title {
    font-size: 16px;
    text-align: center;
    margin-bottom: 20px;
  }
  .item {
    margin-bottom: 10px;
    .qusetion {
      font-size: 15px;
      margin-bottom: 10px;
      i {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #fb2639;
        border-radius: 50%;
      }
    }
    .content {
      font-size: 14px;
    }
  }
}
// 可能喜欢
.maybeLike {
  box-sizing: border-box;
  padding: 20px;
  .title {
    font-size: 16px;
    text-align: center;
  }
}
// 底部固定tabbar
.tabBarContainer {
  position: fixed;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  height: 52px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  display: flex;
  font-size: 16px;
  line-height: 48px;
  text-align: center;
  .kefu{
   line-height: 70px;
    flex: 1;
    border-right: 1px solid #ccc;
    
  }
  .buynow{
    flex: 2;
  }
  .addCart{
    flex: 2;
    background-color: #fb2639;
  }
}
/deep/.van-dropdown-menu__bar {
  .van-dropdown-menu__item:nth-child(1) {
    flex: 1;
    border-right: 1px solid #ccc;
  }
  .van-dropdown-menu__item:nth-child(2) {
    flex: 2;
  }
  .van-dropdown-menu__item:nth-child(3) {
    flex: 2;
    background-color: #fb2639;
    .van-ellipsis {
      color: #fff;
    }
  }
  .van-dropdown-menu__title::after {
    display: none;
  }
}
</style>